<template>
  <view>
    <!-- #ifdef H5 -->
    <u-navbar height="50" title="收银台" title-color="#333" title-size="36"></u-navbar>
    <!-- #endif -->
    <view class="payTimeView">
      <view class="payTimeTitle">实付金额</view>
      <view class="payPrice">¥{{ totalPrice }}</view>
      <view class="orderNumView">
        <text class="orderNum">支付剩余时间：</text>
        <u-count-down
          :show-hours="false"
          :timestamp="timestamp"
          font-size="24"
          separator-size="24"
          separator-color="#787878"
          color="#787878"
          bg-color="#f5f5f5"
        >
        </u-count-down>
      </view>
    </view>
    <view class="payItemView">
      <view class="payTypeItem" @click="onSelected(1)">
        <u-icon name="/static/weixin.png" size="50"></u-icon>
        <view class="payTypeTitle">微信支付</view>
        <u-icon name="/static/selected.png" size="35" v-if="current == 1"></u-icon>
        <u-icon name="/static/unselected.png" size="35" v-else></u-icon>
      </view>
      <view class="payTypeItem" @click="onShare()">
        <u-icon name="/static/hyzf.png" size="50"></u-icon>
        <view class="payTypeTitle">找微信好友支付</view>
        <u-icon name="/static/next.png" size="10"></u-icon>
      </view>
    </view>
    <view class="relaseView" @click="onOrderPayment()">确认支付</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timestamp: 1800,
      current: 1,
      orderId: '',
      totalPrice: '0.00'
    }
  },
  onLoad(res) {
    this.orderId = res.order_id ? res.order_id : ''
    this.totalPrice = res.money ? res.money : ''
  },
  methods: {
    onSelected(index) {
      this.current = index
    },
    onOrderPayment() {
      let self = this
      if (this.current == 1) {
        self.$u.api.setOrderPayment(this.orderId).then((res) => {
          self.onPayment('wxpay', res.data)
        })
      }
    },
    onShare() {
      this.$utils.route({
        url: '/goods/friend-payment/friend-payment',
        params: {
          order_id: this.orderId,
          money: this.totalPrice
        }
      })
    },
    onPayment(provider, orderInfo) {
      uni.requestPayment({
        provider: provider,
        ...orderInfo,
        success() {
          uni.showToast({
            title: '发起支付成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(function () {
            uni.navigateBack()
          }, 500)
        },
        fail() {
          uni.showToast({
            title: '发起支付失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style>
@import url('payment.css');

page {
  background: #f5f5f5;
}
</style>
